<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="../static/wm.js"></script>

    <title>dzlua</title>

    <style type="text/css">
      .s-card {
        width: 12rem;
        height: 12rem;
        float: left;
        margin: 5px 5px 5px 5px;
      }
      .s-button {
        width: 100%;
      }
      .s-title {
        width: 100%;
        text-align: center;
      }
      .s-image {
        height: 5rem;
      }
      .s-div-items {
        margin: 100px 20px 100px 100px;
      }
      
      body{background: url(../img/topbgg.png);color: white;}
      .top{height: 120px;background:url(../img/topbgg.png) repeat-x;position: fixed;top:0;width:100%;z-index: -1;left:0;}
      .top .container{height: 120px;width: 1200px;margin: 0 auto;background-position:center;}
      .top .container .logo img{vertical-align: middle;width: 3rem;}
      .top .container .logo span{vertical-align: middle;font-size: 20px;color: white;text-align: center;}
      .top .container .logo{float:left;font-size: 25px;vertical-align: middle;line-height: 70px;}
      .bottom{height: 60px;position: fixed;bottom:0;width:100%;z-index: 99;left:0;background: #1f2a36;_position:absolute;}
      .bottom .container{height: 60px;width: 1217px;margin: 0 auto;line-height: 60px;color: #676a6c;font-size: 12px;text-align: center;}
    </style>
  </head>
  <body>
    <div class="top">
      <div class="container">
        <div class="logo">
          <img src="https://gitee.com/uploads/42/692042_dzlua.png"><span> Dzlua Windows Message 消息</span>
        </div>
      </div>
    </div>
    <div class="s-div-items">
      <div class="input-group">
        <div class="input-group-btn">
          <button id="btn_change_ser_type" type="button" class="btn btn-default 
          dropdown-toggle" data-toggle="dropdown">所有
              <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a onclick="onChangeSearchType(this, 0);">所有</a></li>
            <li><a onclick="onChangeSearchType(this, 1);">消息名称</a></li>
            <li><a onclick="onChangeSearchType(this, 2);">消息值(十六进制)</a></li>
            <li><a onclick="onChangeSearchType(this, 3);">消息值(十进制)</a></li>
            <li><a onclick="onChangeSearchType(this, 4);">消息说明</a></li>
          </ul>
        </div><!-- /btn-group -->
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="onClear(this);">清空</button>
        </span>
        <input id="input_ele" type="text" class="form-control" oninput="onSerTextChange(this);">
      </div><!-- /input-group -->
      <table id="table_list" class="table table-bordered">
        <thead><tr>
          <th>序号</th>
          <th>消息名称</th>
          <th>消息值 (十六进制)</th>
          <th>消息值 (十进制)</th>
          <th>消息说明</th>
        </tr></thead>
        <tbody id="list_items"></tbody>
      </table>
      <table id="table_search" class="table table-bordered" style="display:none;">
        <thead><tr>
          <th>序号</th>
          <th>消息名称</th>
          <th>消息值 (十六进制)</th>
          <th>消息值 (十进制)</th>
          <th>消息说明</th>
        </tr></thead>
        <tbody id="search_items"></tbody>
      </table>
    </div>
    <div class="bottom">
      <div class="container">
         <a href="https://gitee.com/dzlua/" target="_blank">Copyright 2017-2020 Dzlua. Email: 505544956@qq.com</a>
        </div>
    </div>
    <script>
      let g_ser_type = 0;
      function onChangeSearchType(ele, id) {
        let btn = document.getElementById("btn_change_ser_type");
        btn.innerHTML = ele.innerText + '<span class="caret"></span>';
        g_ser_type = id;
        upDateUI();
      }

      function onSerTextChange(ele) {
        let text = ele.value;
        let bshow = text.length <= 0;
        showElement('table_list', bshow);
        showElement('table_search', !bshow);
        doSearch(text, g_ser_type);
      }

      function stringToHex(str) {
        let val="";
        for(let i = 0; i < str.length; i++){
          if(val == "") val = str.charCodeAt(i).toString(16);
          else val += "," + str.charCodeAt(i).toString(16);
        }
        return val;
      }

      function onClear(ele) {
        let ipe = document.getElementById("input_ele");
        ipe.value = '';
        upDateUI();
      }

      function showElement(id, bshow) {
        let ele = document.getElementById(id);
        if (bshow) ele.style.display = "table";
        else ele.style.display = "none";
      }

      function upDateUI() {
        let ele = document.getElementById("input_ele");
        onSerTextChange(ele);
      }

      function checkSearchData(text, data, tp) {
        let info = '';
        switch (tp) {
          case 0: {
            for (let i = 1; i < 5; ++i) {
              if (checkSearchData(text, data, i))
                return true;
            }
            return false;
          }
          case 1: info = data[0].toLowerCase(); break;
          case 2: info = data[1].toLowerCase(); break;
          case 3: info = parseInt(data[1], 16).toString().toLowerCase(); break;
          case 4: info = data[2].toLowerCase(); break;
          default: return false;
        }
        if (info.length <= 0) return false;
        if (info.indexOf(text) == -1) return false;
        return true;
      }

      function doSearch (text, tp) {
        let ele = document.getElementById('search_items');
        ele.innerHTML = '';

        let idx = 0;
        for (let i = 0; i < datas.length; ++i) {
          if (!checkSearchData(text.toLowerCase(), datas[i], tp))
            continue;
          ++idx;
          addItem(ele, datas[i], idx);
        }
        
      }

      function addItem(ele,info, idx) {
        let html = '<td>'
          + idx + '</td><td>'
          + info[0] + '</td><td>'
          + info[1] + '</td><td>'
          + parseInt(info[1], 16) + '</td><td>'
          + info[2] + '</td>';
        let child = document.createElement('tr');
        child.innerHTML = html;
        ele.appendChild(child);
      }

      (function(){
        let ele = document.getElementById('list_items');
        let idx = 0;
        datas.forEach(data => {
          ++idx;
          addItem(ele, data, idx);
        });

      })();
    </script>
  </body>
</html>